<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import resize from '@/mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'normal-distribution'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '230px'
    },
    chartInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      const that = this
      this.chart = this.$echarts.init(this.$el)
      this.chart.setOption({
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            z: 100,
            shadowStyle: {
              shadowColor: 'rgba(167, 167, 167, 1)',
              shadowBlur: 10,
              color: 'rgba(255, 255, 255, 1)'
            }
          }
        },
        grid: {
          top: 20,
          bottom: 20,
          left: 30,
          right: 20
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              show: false,
              alignWithLabel: true
            },
            axisLine: {
              lineStyle: {
                color: '#889fcc'
              }
            },
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(136, 159, 204, .2)'
              }
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#889fcc'
              }
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            z: 200,
            type: 'line',
            smooth: true,
            symbolSize: 15,
            showSymbol: false,
            itemStyle: {
              normal: {
                show: false,
                color: '#3282FF', //改变折线点的颜色
                lineStyle: {
                  color: '#3282FF' //改变折线颜色
                },
                label: {
                  show: false, //开启显示
                  position: 'top', //在上方显示
                  textStyle: {
                    //数值样式
                    color: '#999999',
                    fontSize: 10
                  }
                }
              },
              emphasis: {
                show: true,
                color: '#3282FF',
                borderColor: '#ffffff',
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  textStyle: {
                    //数值样式
                    color: '##fff',
                    fontSize: 14
                  }
                }
              }
            },
            areaStyle: {
              normal: {
                color: new that.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(50,130,255,0.3)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(50,130,255,0)'
                    }
                  ],
                  false
                ),
                shadowColor: 'rgba(59, 34, 201,1)',
                shadowBlur: 10
              }
            },
            data: [30, 30, 35, 40, 40, 50, 40, 40, 30, 30, 20, 30, 34, 44]
          },
          {
            z: 200,
            type: 'bar',
            barWidth: '5',
            itemStyle: {
              normal: {
                color: 'transparent'
              },
              emphasis: {
                color: '#2B75D4'
              }
            },
            data: [30, 30, 35, 40, 40, 50, 40, 40, 30, 30, 20, 30, 34, 44]
          }
        ]
      })
    }
  }
}
</script>
